<template>
  <div>
    <h1>首页</h1>
    <ul>
      <li v-for="item in students" :key="item.id">
        <router-link :to="{ name: 'itemdetail', query: { id: item.id } }">
          <!-- http://localhost:3000/assets/img/yangyang.jpg -->
          <!-- http://localhost:3000/#/shouye/itemdetail?id=01 -->

          <!-- http://localhost:3000/#/shouye/itemdetail?id=02 -->
          <img :src="item.img" alt="" srcset="" />
          <p>{{ item.name }}</p>
        </router-link>
      </li>
    </ul>
    <!-- 在路由组件当中可以是props进行父传子 -->
    <!-- <router-view :students="students"></router-view> -->
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        {
          id: "01",
          name: "王洋洋",
          img: require("../assets/img/yangyang.jpg"),
        },
        {
          id: "02",
          name: "chaochao",
          img: require("../assets/img/chaochao.jpg"),
        },
        {
          id: "03",
          name: "jianing",
          img: require("../assets/img/jianing.jpg"),
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
ul {
  li {
    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>